<script>
import { ref } from '@vue/reactivity'
import { Toast } from 'vant'
import { useStore } from 'vuex'
import 'vant/es/toast/style';
import { useRouter } from 'vue-router';
export default {
  setup() {
    let phone = ref(null)
    let password = ref(null)

    let router = useRouter()
    let showeye = ref("false")

    let change = () =>{
      showeye.value=!showeye.value
    }

    // 清除
    let clear = () => {
      phone.value = "";
    };

    // 实例化store
    const store = useStore()
    // 获取本地存储里面的数据（对象）
    let Storage = JSON.parse(window.sessionStorage.getItem("data"))
    // console.log(Storage);
    // 传入store里面的mutations
    let login = () => {
      if(Storage == null){
        Toast("请确定有没有注册")
        return
      }else{
        store.commit("login",Storage)
      }

      if(phone.value ==store.state.phone && password.value ==store.state.password){
        router.push({
          path:"/home"
        })
      }else{
        Toast("账号或密码有误")
      }
    }
    return {
      login,
      phone,
      password,
      showeye,
      change,
      clear
    }
  },
}
</script>


<template>
  <div class="container">
    <div class="box1">
      <div class="box">
        <!-- 头部返回键 -->
        <div class="top">
          <router-link to="/my">
            <i></i>
          </router-link>

          <router-link to="/reg" v-slot="{ btn }">
            <h5 @click="btn">注册</h5>
          </router-link>
        </div>
        <!-- 大logo -->
        <div class="logo"></div>

        <!-- 两个输入框 -->
        <div class="text">
          <input type="number" placeholder="请输入手机号" v-model="phone" />
          <i @click="clear"></i>
          <input placeholder="请输入密码(6-20位任意字符)" v-model="password" :type="showeye?'password':'textpassword'"/>
          <!-- <span></span> -->
          <span :class="[showeye?'eye':'eyes']" @click="change"></span>
        </div>

        <div>
          <div class="login" @click="login">
            <h4>登录</h4>
          </div>
        </div>

        <div class="alary">
          <a>忘记密码?</a>
        </div>
      </div>

      <div class="bottom">
        <div class="text1">
          <h6>*温馨提示：该账户在以下应用中通用</h6>
        </div>

        <div class="big-text">
          <div class="text2">
            <i></i>
            <h6>巅峰训练</h6>
          </div>

          <div class="text3">
            <i></i>
            <h6>星火英语</h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
@import "../assets/css/base.css";

.box {
  display: flex;
  flex-direction: column;
}

.box1 {
  display: flex;
  flex-direction: column;
}

.box .top {
  display: flex;
  height: 42px;
  justify-content: space-between;
  align-items: center;
}

.box .top i {
  display: block;
  background-image: url(../assets/img/close.6dfeaa4.png);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  width: 22px;
  height: 22px;
  margin-left: 17px;
}

.box .top h5 {
  margin-right: 16px;
  color: #4a85fd;
  font-size: 15px;
}

.box .logo {
  background-image: url(../assets/img/ic_logo.b351957.png);
  background-size: 100px 100px;
  width: 100px;
  height: 100px;
  align-self: center;
  margin-top: 14px;
}

.box .text {
  display: flex;
  flex-direction: column;
  margin-top: 43px;
  position: relative;
}

.box .text input {
  height: 52px;
  border-bottom: 1px solid #f0f0f0;
  margin-left: 36px;
  margin-right: 36px;
  font-size: 16px;
}

.box .text>i {
  position: absolute;
  display: block;
  top: 18px;
  right: 42px;
  width: 14px;
  height: 14px;
  background-image: url(../assets/img/ic_clean.822fd1d.png);
  background-size: 14px 14px;
}

.box .text>.eye {
  position: absolute;
  display: block;
  bottom: 18px;
  right: 42px;
  width: 14px;
  height: 14px;
  background-image: url(../assets/img/ic_closei.3680308.png);
  background-size: 14px 14px;
}

.box .text>.eyes {
  position: absolute;
  display: block;
  bottom: 18px;
  right: 42px;
  width: 14px;
  height: 14px;
    background-image: url(../assets/img/ic_open.0554c0f.png);
  background-size: 14px 14px;
}

.login {
  justify-content: center;
  align-items: center;
  height: 45px;
  background-color: #4c84ff;
  margin: 45px 36px 0px 36px;
  border: 1px solid #dbe1ef;
  border-radius: 5px;
}

.login h4 {
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fcfdff;
}

.alary {
  margin-top: 17px;
  align-self: flex-end;
  margin-right: 36px;
}

.alary a {
  color: #4c84ff;
  font-size: 12px;
}

.bottom {
  margin-top: 110px;
  color: #c2c2c2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom .text1 {
  height: 43px;
  line-height: 43px;
}

.bottom .big-text {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.bottom .big-text .text2 {
  margin-left: 90px;
  height: 20px;
  line-height: 20px;
  display: flex;
}

.bottom .big-text .text2 i {
  display: block;
  background-image: url(../assets/img/dianfengxunlian.png);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-right: 8px;
}

.bottom .big-text .text3 {
  display: flex;
  height: 20px;
  line-height: 20px;
  margin-right: 90px;
}

.bottom .big-text .text3 i {
  display: block;
  background-image: url(../assets/img/xinghuoyingyu.png);
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 3px;
}
</style>